<template>
	<view>
		<u-navbar :is-back="false" back-icon-color="#333" :background="background" title="首页" title-color="#fff"
			:back-text-style="{ color: '#fff' }">
		</u-navbar>



		<view>
			<view class="bg flex flex-direction" style="width: 100%;height: 200px;">
				<view class="flex justify-between " style="height: 50%; border-bottom: 1px solid #D8D8D8;">
					<view class="flex-sub  flex padding-left-xl  justify-center flex-direction text-white"
						style="font-size: 18px; gap: 5px;">
						<view>本月销售总额</view>
						<view class="flex">
							<view v-if="see == true" class="padding-right-xl">{{ monthMoneyNum }}</view>
							<view v-if="see == false" class="padding-right-xl">***,***.**</view>
							<view class="eye" @tap="see = !see"></view>
						</view>
					</view>
					<view @click="$open('/pages/order/order')"
						class="flex-sub  flex padding-left-xl  justify-center flex-direction text-white"
						style="font-size: 18px; gap: 5px;">
						<view>待处理</view>
						<view style="color:#FF0000;font-weight:600">{{ todoorderNumber }}单</view>
					</view>
				</view>
				<view class="flex  align-center padding-left-xl text-white" style="height: 40%;">
					<view v-show="$rule('kehuliang')" @click="$open('/pages/information/mycustomerinfo/index')">客户量 {{ indexData.customer_count }}
					</view>
					<view v-show="$rule('yejipaihang')" class="margin-left-xl">业绩排名 {{ indexData.rank }}</view>
					<view v-show="$rule('benyuedindanshuliang')" class="margin-left-xl">本月订单数量 {{ monthOrderNum }}</view>


				</view>
				<!-- <view class="flex  align-center padding-left-xl text-white" style="margin-bottom:30rpx"> -->

					<!-- <view v-show="$rule('benyuedindanzoe')" class="margin-left-xl">本月销售总额 {{ monthMoneyNum }}</view> -->
				<!-- </view> -->

				<view class="bar flex justify-center align-center" style="gap: 28px;">
					<view @click="$open('/pages/sell/addorder')" v-show="$rule('xiaoshoukaidan')"
						class="flex justify-center align-center flex-direction" style="gap: 8px;">
						<view class="icon icon1"></view>
						<view>销售开单</view>
					</view>
					<view v-show="$rule('xiaoshoujilu')" @click="$open('/pages/order/order')"
						class="flex justify-center align-center flex-direction" style="gap: 8px;">
						<view class="icon icon3"></view>
						<view> 销售记录</view>
					</view>
					<view v-show="$rule('shanpingleibiao')" @click="$open('/pages/chooseGoods/chooseGoods')"
						class="flex justify-center align-center flex-direction" style="gap: 8px;">
						<view class="icon icon2"></view>
						<view>商品类表</view>
					</view>

					<view v-show="$rule('gerenyeji')" @click="$open('/pages/myEarning/myEarning')"
						class="flex justify-center align-center flex-direction" style="gap: 8px;">
						<view class="icon icon4"></view>
						<view>个人业绩</view>
					</view>
				</view>
			</view>
			<!-- <view class="list " style="">
				<view style="padding-left: 15px;">销售相关数据</view>
				<view class="listboard padding">
				
					<view class="flex justify-between padding-sm bg-gray margin-top-sm" style="border-radius: 8px;">
						<view>销售笔数</view>
						<view>{{ indexData.sell_count }}</view>
					</view>
					<view class="flex justify-between padding-sm bg-gray margin-top-sm" style="border-radius: 8px;">
						<view>本月销售笔数</view>
						<view>{{ indexData.month_count }}</view>
					</view>
					<view class="flex justify-between padding-sm bg-gray margin-top-sm" style="border-radius: 8px;"
						@click="$open('/pages/information/mycustomerinfo/index')">
						<view>服务客户</view>
						<view>{{ indexData.customer_count }}位</view>
					</view>
				</view>
			</view> -->
			<view class="list " style="">
				<view class="daichuli">
					<view>待处理订单</view>
					<view class="seemore" @click="$open('/pages/order/order')">
						查看更多<u-icon name="arrow-right"></u-icon>

					</view>
				</view>
				<view v-if="orderList.length < 1">
					<u-empty text="暂无订单" mode="order"></u-empty>
				</view>
				<view class="listboard padding" v-else>

					<view class="flex justify-between padding-sm bg-gray margin-top-sm"
						style="border-radius: 8px;display: flex;align-items: center;font-size: 12px;"
						v-for="item in orderList" :key="item.id">
						<view>
							<view>
								{{ item.customer_name }}
							</view>
							<view>
								{{ item.code }}
							</view>
							<view>
								{{ item.billing_time_text }}
							</view>
						</view>
						<view><u-button @click="onClickDetail(item.id)" shape="circle" size="mini"
								type="error">去处理</u-button></view>
					</view>

				</view>

			</view>

			<view class="list2 " style="">
				<view style="padding-left: 15px;">销售趋势</view>
				<view class="listboard padding">
					<view class="charts-box">
						<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
					</view>
				</view>
			</view>
			<view class="list3" style="">
				<view style="padding-left: 15px;">业绩排行</view>
				<view class="listboard padding">
					<view class="allRank">

						<view class="rank-item" v-for="(item, index) in rankList" :key="index">

							<!-- <view :class="['current-rank', { 'blackFont': index >= 3 }]"
								:style="{ 'background-image: ': 'url('+item.bgimg+')' }">

								<view class="defaultRank">

									{{ index + 1 }}
								</view>
							</view> -->

							<!-- 第一名加图片 -->
							<view v-if="index == 0" class="current-rank" 
							:style="{ 'background-image': 'url(https://ddcerp.hellomky.cn/1.jpg)' }">
								<view class="current-text">
									{{ index + 1 }}
								</view>
							</view>
							<!-- 第二名加图片 -->
							<view v-if="index == 1" class="current-rank"
							:style="{ 'background-image': 'url(https://ddcerp.hellomky.cn/2.jpg)' }">
								<view class="current-text">
									{{ index + 1 }}
								</view>
							</view>
							<!-- 第三名加图片 -->
							<view v-if="index == 2" class="current-rank"
							:style="{ 'background-image': 'url(https://ddcerp.hellomky.cn/3.jpg)' }">
								<view class="current-text">
									{{ index + 1 }}
								</view>
							</view>
							<!-- 第四名及以后 -->
							<view v-if="index >= 3" class="current-rank">
								<view class="current-text">
									{{ index + 1 }}
								</view>
							</view>


							<view class="dsb" style="width:100%">
								<view class="avatar-container">
									<view style="margin-right: 30rpx;">
										<u-avatar :src="item.avatar"></u-avatar>
									</view>
									<view>{{ item.nickname }}</view>
								</view>
								<view class="rank-money">
									<text>￥{{ item.total }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>



		<view class="content" v-if="data" v-show="$rule('shouyebaikuai')">
			<view class="color-box" v-if="infodata" style="margin-top: 20px;">
				<view class="color-item bg1" v-show="$rule('caigouhuizong')">
					<view class="color-title">
						￥{{ infodata.purchase.totalMoney }}
					</view>
					<view class="color-value">
						采购汇总
					</view>
				</view>
				<view class="color-item bg4" v-show="$rule('caigoutuihuohuizong')">
					<view class="color-title">
						￥{{ infodata.Retprodcut.totalMoney }}
					</view>
					<view class="color-value">
						采购退货汇总
					</view>
				</view>
			</view>

			<view class="color-box" v-if="infodata">
				<view class="color-item bg3" v-show="$rule('xiaoshouhuizong')">
					<view class="color-title">
						￥{{ infodata.deliveryPro.totalMoney }}
					</view>
					<view class="color-value">
						销售汇总
					</view>
				</view>
				<view class="color-item bg4" v-show="$rule('xiaoshoutuihuohuizong')">
					<view class="color-title">
						￥{{ infodata.sellreturn.totalMoney }}
					</view>
					<view class="color-value">
						销售退货汇总
					</view>
				</view>
			</view>


			<!-- <view class="m_top25" v-for="(listitem, index) in data.menus" :key="index">
				<u-section :title="listitem.title" :right="false" :show-line="true"></u-section>
				<view class="white m_top5">
					<u-grid :col="3" :border="false">
						<u-grid-item v-for="(item, idx) in listitem.info" :key="idx" @tap="onClick(item.url ? item.url : null)">
							<image class="u-grid-item-img" :src="item.src"></image>
							<view class="grid-text">{{ item.title }}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
import rankIndex from '../../components/rankIndex/rankIndex.vue';
var _this;
export default {
	components: { rankIndex },
	data() {
		return {
			monthOrderNum: null,
			monthMoneyNum: null,
			curNow: 0,
			current: 1,
			// tabList: [
			// 	'本月业绩', '上月业绩'
			// ],
			rankList: [],//排行列表
			myRanking: {},//我的排名
			orderForm: {
				oderId: '',
				startTime: '',
				endTime: '',
				status: '0',
				page: '1',
				limit: '3'
			},
			orderList: [],
			todoorderNumber: 0,
			login: false,
			userInfo: {},
			see: true,
			background: {
				backgroundColor: '#334285',
			},
			data: null,
			infodata: null,
			indexData: {},//首页数据

			chartData: {
				categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				series: [
					{
						name: "销量",
						lineType: "dash",
						data: [35, 8, 25, 37, 4, 20]
					},
				]
			},

			opts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [15, 10, 0, 15],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
					labelCount: 3
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "curve",
						width: 2,
						activeType: "hollow"
					}
				}
			},
		}
	},
	// onLoad() {
	// 	_this = this;
	// 	_this.getinfo();

	// },
	onLoad() {
		this.getUserAuth()//获取用户权限列表
		this.getIndexData()
		_this = this;
		_this.getinfo();
		_this.getToDoOrderNumber();
		let userinfo = uni.getStorageSync('userinfo');
		if (userinfo) {
			_this.login = true;
		}
		_this.getUserDetail()
		_this.getorderList()
		_this.getRankList()
		_this.getMonthAndOrderNum()

	},
	onShow() {
		_this.getorderList()
	},
	methods: {
		getMonthAndOrderNum() {
			this._post_form('api/ykjp/sell/Sell/monthOrder', {}, (res) => {
				if (res.code == 1) {
					this.monthOrderNum = res.data.orderNum
					this.monthMoneyNum = res.data.moneySum
				} else {
					uni.showToast({
						title: res.msg || '获取排名失败',
						icon: 'none'
					});
				}
			})
		},
		getRankList() {
			this._post_form('api/user/getRanking', {}, (res) => {
				console.log('%c [ res ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', res)
				if (res.code == 1) {
					this.myRanking = res.data.myRanking
					this.rankList = res.data.userlist.slice(0, 5);
					// 循环前3名增加图片背景
					this.rankList.forEach((item, index) => {

						// 第一名加背景图片
						if (index == 0) {
							item.bgimg = 'https://ddcerp.hellomky.cn/1.jpg'
						}
						// 第二名加背景图片
						if (index == 1) {
							item.bgimg = 'https://ddcerp.hellomky.cn/2.jpg'
						}
						// 第三名加背景图片
						if (index == 2) {
							item.bgimg = 'https://ddcerp.hellomky.cn/3.jpg'
						}

					})
				} else {
					uni.showToast({
						title: res.msg || '获取排名失败',
						icon: 'none'
					});
				}
			})
		},
		sectionChange(index) {
			this.curNow = index;
		},
		valChange(e) {
			console.log('当前值为: ' + e.value)
		},



		onClickDetail(id) {
			uni.navigateTo({
				url: '/pages/sell/orderdetail?id=' + id
			})
		},
		getorderList() {
			this._post_form('api/ykjp/sell/sell/getOrderList', this.orderForm, (res) => {
				if (res.code == 1) {

					console.log('%c [ res.data.data ]-213', 'font-size:13px; background:pink; color:#bf2c9f;', res.data.data)
					this.orderList = res.data.data
					//清除存储的rulelist
				}
			})
		},
		getToDoOrderNumber() {
			this._post_form('api/ykjp/sell/sell/getToDoOrderNumber', {}, (res) => {
				if (res.code == 1) {
					console.log('%c [ res.data.data ]-213', 'font-size:13px; background:pink; color:#bf2c9f;', res.data)
					this.todoorderNumber = res.data.data
					console.log('%c [ _this.todoorderNumber ]-216', 'font-size:13px; background:pink; color:#bf2c9f;', this.todoorderNumber)
				}
			})
		},
		getUserAuth() {
			this._post_form('api/User/auth', {}, (res) => {
				if (res.code == 1) {

					//清除存储的rulelist
					uni.removeStorageSync('rulelist')
					uni.setStorageSync('rulelist', res.data.rulelist)
				}
			})
		},
		getIndexData() {
			this._post_form('api/ykjp/sell/Home/index', {}, (res) => {

				if (res.code == 1) {
					this.indexData = res.data
					console.log('%c [ this.indexData ]-290', 'font-size:13px; background:pink; color:#bf2c9f;', this.indexData)
					this.chartData.categories = res.data.date;
					this.chartData.series[0].data = res.data.total
				} else {
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				}
			})
		},
		getUserDetail() {
			// var _this = this;
			_this._post_form('api/user/getUserDetail', {}, function (result) {
				_this.setData({
					userInfo: result.data
				})
			});
		},
		gourl(url) {
			if (_this.login) {
				uni.navigateTo({
					url: url
				});
			} else {
				uni.navigateTo({
					url: 'login'
				});
			}
		},
		onClick(url) {
			if (url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		getinfo() {
			_this._post_form('api/index/getmenus2', {}, (result) => {
				_this.data = result.data
			});

			_this._post_form('api/ykjp/summary/Purchase/index', {}, (result) => {
				_this.infodata = result.data.data
			});
		}
	}
}
</script>

<style lang="scss">
.dsb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.blackFont {
	color: #000 !important;
}

.defaultRank {
	position: absolute;
	font-weight: 600;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.rank-body {
	background-color: #F4F5F7;
	height: 100vh;

}

.allRank {
	background-color: #fff;
}

.myRank {
	background-color: #fff;
	padding-top: 20rpx;
}

.rank-item {
	display: flex;
	padding: 20rpx;
	align-items: center;

	border-bottom: #EFEFEF 1rpx solid;

	.current-rank {
		position: relative;
		color: #fff;
		width: 100rpx;
		height: 80rpx;
		margin-right: 30rpx;
		background-size: cover;
		
		.current-text {
			color: #fff;
			position: absolute;
			font-weight: 600;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.avatar-container {
		display: flex;
		align-items: center;
	}

	.rank-money {
		font-weight: 600;
		font-size: 38rpx;
		color: #D32C0B;
		display: flex;
	}
}

.daichuli {
	padding-left: 30rpx;
	padding-right: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;

	.seemore {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 12px;
		color: #999;
	}
}

.content {
	padding: 10px 10px;
}

.grid-text {
	font-size: 28rpx;
	margin-top: 4rpx;
	color: #333;
}


.m_top15 {
	margin-top: 15px;
}

.m_top25 {
	margin-top: 25px;
}

.m_top5 {
	margin-top: 5px;
}

.u-grid-item-img {
	margin: 0 auto;
	display: block;
	padding: 5px 0;
	width: 28px;
	height: 28px;
}


.color-box {
	/* padding: 0 15px; */
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	text-align: center;
	margin-top: 20rpx;
}

.color-item {
	display: flex;
	flex: 1;
	margin: 0 8rpx;
	flex-direction: column;
	border-radius: 6rpx;
	padding: 12rpx 0;
	height: 75px;
}

.bg1 {
	background: linear-gradient(-125deg, #334285, #2E3A76);
}

.bg2 {
	background: linear-gradient(-125deg, #2e4776, #2E3A76);
}

.bg3 {
	background: linear-gradient(-125deg, #413385, #2e4276);
}

.bg4 {
	background: linear-gradient(-125deg, #543385, #402e76);
}

.color-title {
	font-size: 30px;
	/* line-height: 75px; */
	height: 75px;
}

.color-value {
	font-size: 24rpx;
}




//后加入
page {
	background: #F4F5F7;
	padding-bottom: 84px;
}

.list {
	box-sizing: border-box;
	width: 96%;
	margin: 0 auto;
	margin-top: 120px;
	font-size: 18px;

	.listboard {
		background: #fff;
		margin-top: 20px;
		border-radius: 5px;
	}
}

.list2 {
	box-sizing: border-box;
	width: 96%;
	margin: 0 auto;
	margin-top: 20px;
	font-size: 18px;

	.listboard {
		height: 300px;
		background: #fff;
		margin-top: 20px;
		border-radius: 5px;
	}
}

.list3 {
	box-sizing: border-box;
	width: 96%;
	margin: 0 auto;
	margin-top: 20px;
	font-size: 18px;

	.listboard {

		background: #fff;
		margin-top: 20px;
		border-radius: 5px;
	}
}

.icon1 {
	width: 52px;
	height: 52px;
	background-image: url('');
	background-size: cover;
}

.icon2 {
	width: 52px;
	height: 52px;
	background-image: url('');
	background-size: cover;
}

.icon3 {
	width: 52px;
	height: 52px;
	background-image: url('');
	background-size: cover;
}

.icon4 {
	width: 52px;
	height: 52px;
	background-image: url('');
	background-size: cover;
}

.bar {
	width: 96%;
	height: 122px;
	background: #fff;
	/* 矩形 2 */

	position: absolute;
	border-radius: 5px;
	bottom: -100px;
	left: 50%;
	transform: translateX(-50%);
}

.icon {
	width: 60px;
	height: 60px;
}

.eye {
	width: 24px;
	height: 24px;
	background-image: url('');
	background-size: cover;
}

.bg {
	position: relative;
	background-image: url('');
	background-size: cover;
}</style>
